<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1"><link href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css rel=stylesheet integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u crossorigin=anonymous><link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/prism/1.8.3/themes/prism.min.css><title>Vue Avatar | Avatar component for Vue.js</title><style>body {
padding: 15px;
}
.container {
max-width: 730px;
}
.jumbotron {
background-color: #fff;
text-align: center
}
.jumbotron #avatar {
display: inline-block;
margin-right: 7px;
}
.examples {
background-color: #eee
}
table tr:nth-child(2n) {
background-color: #f1f1f1;
}
table th {
border-top: 1px solid #ccc;
}
table td, table th {
padding: 8px 8px;
border-bottom: 1px solid #ccc;
}
.default-avatar {
  margin: 3px;
}</style></head><body><div id=app><a href=https://github.com/eliep/vue-avatar><img style="position: absolute; top: 0; right: 0; border: 0" src=https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67 alt="Fork me on GitHub" data-canonical-src=https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png></a><div class=container><div class=row><div class=jumbotron><h1><avatar id=avatar username=vue-avatar :size=70 inline @avatar-initials=initials></avatar>vue-avatar</h1><p class=lead>An avatar component for vue.js</p></div><h2>Description</h2><p>This component display an avatar image and if none is provided fallback to the user initials. This component is highly inspired from<a href=https://github.com/wbinnssmith/react-user-avatar>react-user-avatar</a></p><p>Rules used to compute user initials:<ul><li>divide the username on space and hyphen</li><li>use the first letter of each parts</li><li>never use more than three letters as initials</li><li>if the username is divided in more than three parts and has part starting with an uppercase, skip parts starting with a lowercase.</li></ul><rules :items=items></rules></p><h2>Installation</h2><pre><code class=language-html>npm install vue-avatar</code></pre><h2>Versions</h2><table width=50%><tbody><tr><th>Vue.js</th><th>vue-avatar</th></tr><tr><td>^1.0.18</td><td>^1.3.0</td></tr><tr><td>^2.0.0</td><td>^2..0</td></tr></tbody></table><h2>Usage</h2><p>vue-avatar is a UMD module, which can be used as a module in both CommonJS and AMD modular environments. When in non-modular environment, Avatar will be registered as a global variable.</p><h3>ES6</h3><pre><code class=language-javascript>import Avatar from 'vue-avatar'

export default {

  components: {
    Avatar
  },

}
</code></pre><p>After that, you can use it in your templates:</p><pre><code class=language-html>&lt;avatar username="Jane Doe"&gt;&lt;/avatar&gt;
</code></pre><p>which will render to:</p><avatar username="Jane Doe"></avatar><h3>CommonJS</h3><pre><code class=language-javascript>var Vue = require('vue')
var Avatar = require('vue-avatar')

var YourComponent = Vue.extend({
  components: {
    'avatar': Avatar
  }
})
</code></pre><h3>Browser</h3><pre><code class=language-html>&lt;script src="path/to/vue/vue.min.js"&gt;&lt;/script&gt;
&lt;script src="path/to/vue-avatar/dist/vue-avatar.min.js"&gt;&lt;/script&gt;

new Vue({
  components: {
    'avatar': Avatar
  }
})
</code></pre><h2>Props</h2><table class=table><thead><tr><th>Name</th><th>Required</th><th>Default</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>username</td><td>Y</td><td>-</td><td>String</td><td>The user name that will be used to compute user initial.</td></tr><tr><td>initials</td><td>N</td><td>-</td><td>String</td><td>Force the displayed initials by overriding the computed ones.</td></tr><tr><td>initials</td><td>N</td><td>false</td><td>Boolean</td><td>Uses inline-flex instead of flex.</td></tr><tr><td>src</td><td>N</td><td>-</td><td>String</td><td>Path to the avatar image to display.</td></tr><tr><td>:customStyle</td><td>N</td><td>-</td><td>Object</td><td>A custom style object to override the base styles.</td></tr><tr><td>backgroundColor</td><td>N</td><td>-</td><td>String</td><td>The avatar background color to use if no image is provided. If none is specified, a background color will be picked depending on the user name length.</td></tr><tr><td>color</td><td>N</td><td>-</td><td>String</td><td>The font color used to render the user initials. If none is provided, the background color is used to compute the font color.</td></tr><tr><td>:lighten</td><td>N</td><td>80</td><td>Number</td><td>A factor by which the background color must be lightened to produce the font color. Number between [-100,100].</td></tr><tr><td>:size</td><td>N</td><td>50</td><td>Number</td><td>The avatar size in pixel.</td></tr><tr><td>:rounded</td><td>N</td><td>true</td><td>Boolean</td><td>True for a rounded avatar.</td></tr></tbody></table><h2>Event</h2><table class=table><thead><tr><th>Name</th><th>Arguments</th><th>Description</th></tr></thead><tbody><tr><td>@avatar-initials</td><td>username (the value of the username props), initials (the value of the computed initials or the initials props if any)</td><td>This event is trigger when the component is ready with component username and initial.</td></tr></tbody></table><h2>Examples</h2><table class=table><thead><tr><th></th><th>Code</th></tr></thead><tbody><tr><td><avatar username="Hubert-Félix Thiéfaine"></avatar></td><td><pre><code class=language-html>&lt;avatar username="Hubert-Félix Thiéfaine"&gt;&lt;/avatar&gt;</code></pre></td></tr><tr><td><avatar username="Hubert-Félix Thiéfaine" background-color=#FFC107 :size=100 :rounded=false :lighten=20></avatar></td><td><pre><code class=language-html>&lt;avatar username="Hubert-Félix Thiéfaine"
  background-color="#FFC107"
  :size="100"
  :rounded="false"
  :lighten="20"&gt;
&lt;/avatar&gt;</code></pre></td></tr><tr><td><avatar username="Hubert-Félix Thiéfaine" background-color=#FFC107 :size=100 :rounded=false color=#fff @avatar-initials=initials></avatar></td><td><pre><code class=language-html>&lt;avatar username="Hubert-Félix Thiéfaine"
  background-color="#FFC107"
  :size="100"
  :rounded="false"
  color="#fff"&gt;
&lt;/avatar&gt;</code></pre></td></tr><tr><td><avatar username="Darth Vader" background-color=#000 :size=100 :rounded=false @avatar-initials=initials></avatar></td><td><pre><code class=language-html>&lt;avatar username="Darth Vader"
  background-color="#000"
  :size="100"
  :rounded="false"&gt;
&lt;/avatar&gt;</code></pre></td></tr><tr><td><avatar src=./static/darth-vader.png :size=100></avatar></td><td><pre><code class=language-html>&lt;avatar
  src="./static/darth-vader.png"
  :size="100"&gt;
&lt;/avatar&gt;</code></pre></td></tr><tr><td><avatar username="Darth Vader" initials=AS :size=100></avatar></td><td><pre><code class=language-html>&lt;avatar username="Darth Vader"
  initials="AS"
  :size="100"&gt;
&lt;/avatar&gt;
</code></pre></td></tr></tbody></table><h2>Default color</h2><p>18 default background colors are available and can be seen below. The background color chosen depends on the username length. This way a username will always have the same background color.</p><avatar class=default-avatar inline :size=70 username=A></avatar><avatar class=default-avatar inline :size=70 username=BB></avatar><avatar class=default-avatar inline :size=70 username=CCC></avatar><avatar class=default-avatar inline :size=70 username=DDDD></avatar><avatar class=default-avatar inline :size=70 username=EEEEE></avatar><avatar class=default-avatar inline :size=70 username=FFFFFF></avatar><avatar class=default-avatar inline :size=70 username=GGGGGGG></avatar><avatar class=default-avatar inline :size=70 username=HHHHHHHH></avatar><avatar class=default-avatar inline :size=70 username=IIIIIIIII></avatar><br><avatar class=default-avatar inline :size=70 username=JJJJJJJJJJ></avatar><avatar class=default-avatar inline :size=70 username=KKKKKKKKKKK></avatar><avatar class=default-avatar inline :size=70 username=LLLLLLLLLLLL></avatar><avatar class=default-avatar inline :size=70 username=MMMMMMMMMMMMM></avatar><avatar class=default-avatar inline :size=70 username=NNNNNNNNNNNNNN></avatar><avatar class=default-avatar inline :size=70 username=OOOOOOOOOOOOOOO></avatar><avatar class=default-avatar inline :size=70 username=PPPPPPPPPPPPPPPP></avatar><avatar class=default-avatar inline :size=70 username=QQQQQQQQQQQQQQQQQ></avatar><avatar class=default-avatar inline :size=70 username=RRRRRRRRRRRRRRRRRR></avatar></div></div></div><script src=https://cdnjs.cloudflare.com/ajax/libs/prism/1.8.3/prism.min.js></script><script src=https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js></script><script src=https://cdnjs.cloudflare.com/ajax/libs/prism/1.8.3/components/prism-javascript.min.js></script><script type=text/javascript src=static/js/manifest.5020f7065e48e489da3a.js></script><script type=text/javascript src=static/js/vendor.70ddb044fd355b38f9df.js></script><script type=text/javascript src=static/js/app.d8462f91aa2eb4bec7f8.js></script></body></html>